<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">

    class App extends React.Component {
        state = {
            // 购物车列表
            list: [
                {
                    name: "辣条",
                    price: 0.5,
                    num: 1
                }, {
                    name: "巧克力",
                    price: 2,
                    num: 1
                }, {
                    name: "奶茶",
                    price: 5,
                    num: 1
                }, {
                    name: "烤箱",
                    price: 999,
                    num: 1
                }
            ]
        }
        render() {
            // 获取购物车列表 解构
            let { list } = this.state;
            return (
                <div>
                    <h1>购物车案例</h1>
                    <table border='1'>
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                list.map((item, index) => {
                                    return (
                                        <tr key={index}>
                                            <td>{item.name}</td>
                                            <td>{item.price}</td>
                                            <td>
                                             <button onClick={()=>this.reduce(index)}className={item.num<=0?'red':''}>-</button>   {item.num}
                                             <button onClick={()=>this.addNum(index)} className={item.num>=10?'red':''}>+</button>
                                            </td>
                                            <td>
                                                <button onClick={()=>{
                                                    list.splice(index,1);
                                                    this.setState({
                                                        list:list
                                                    })
                                                }}>删除</button>
                                            </td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>

                    <h2>商品总价：{this.getSumPrice()}</h2>
                </div>
            )
        }
        getSumPrice(){
            // 商品总价 = 每个商品总价之和
            // 每个商品总价 = 商品单价*商品数量
            console.log(this)
            // 获取商品列表
            let {list} = this.state;
            let sum = 0;
            list.forEach(item=>{
                // 每个商品总价
                let goodsPrice = item.price*item.num;
                sum+=goodsPrice;
            })
            // console.log(sum)
            return sum
        }
        // 添加商品数量
        addNum(index){
            // console.log(index)
            //根据索引找到要添加商品数量的商品
            let goods = this.state.list[index];
            // 判断商品数量是否大于等于10
            if(goods.num>=10){
                return
            }
            // console.log(goods)
            goods.num++;
            this.setState({
                list:this.state.list
            })
        }
        // 减少商品数量
        reduce(index){
            let goods = this.state.list[index];
            // 若商品数量等于小于0不能在减少
            if(goods.num<=0){
                return
            }
            goods.num--;
            this.setState({
                list:this.state.list
            })
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))

</script>

</html>